<template>
  <div class="newProject">
    <div style="width: 95%;height: 838px; margin: auto;margin-top: 20px;">
      <div>
        <el-form ref="form" :model="form">
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">供应商名称：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="name">
                <span class="text">{{ supplierInfo.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">法定代表人：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="artificialPerson">
                <span class="text">{{ supplierInfo.artificialPerson }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">资质：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="credential">
                <span class="text">{{ supplierInfo.credential }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">组织机构代码：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="code">
                <span class="text">{{ supplierInfo.code }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">开户行：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="bank">
                <span class="text">{{ supplierInfo.bank }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">账号：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="account">
                <span class="text">{{ supplierInfo.account }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">联系人：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="contactor">
                <span class="text">{{ supplierInfo.contactor }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">联系电话：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="telephone">
                <span class="text">{{ supplierInfo.telephone }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="">电子邮件：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="email">
                <span class="text">{{ supplierInfo.email }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="">传真：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="fax">
                <span class="text">{{ supplierInfo.fax }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">经营范围：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="businessScope">
                <span class="text">{{ supplierInfo.businessScope }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">注册地址：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="" prop="address">
                <span class="text">{{ supplierInfo.address }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 100px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">主要成员及职务：</span>
            </el-col>
            <el-col :span="18" class="colRight">
              <el-form-item label="" prop="members">
                <span class="text">{{ supplierInfo.members }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 100px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">主要业绩：</span>
            </el-col>
            <el-col :span="18" class="colRight">
              <el-form-item label="" prop="achievements">
                <span class="text">{{ supplierInfo.members }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 86px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">附件：</span>
            </el-col>
            <el-col :span="18" class="colRight">
              <el-upload :auto-upload="false" action="javascript:void(0)" :file-list="supplierInfo.annexs"
                :on-preview="downLoad">
                <!-- <el-button size="small" type="primary">点击上传</el-button> -->
              </el-upload>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 140px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span>备注：</span>
            </el-col>
            <el-col :span="18" class="colRight">
              <span class="text">{{ supplierInfo.remark }}</span>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadGet } from '@/utils/request'
export default {
  components: {
  },
  props: {
    supplierInfo: {
      type: Object,
      required: false,
    }
  },
  data() {
    return {
      form: {},
      fileList: []
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    // 下载附件
    downLoad(file) {
      return downloadGet(this.downBaseUrl + file.path, {}, file.name);
    },
  }
}
</script>

<style scoped>
.newProject {
  width: 95%;
  height: 100%;
  background-color: #FFFFFF;
  margin-top: 20px;

  .colRight {

    padding: 10px;
    background-color: #FFFFFF;

    .text {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #606266;
      line-height: 22px;
    }
  }

  .colLeft {
    /* border: 1px solid #DCDFE6; */
    background-color: #F5F7FA;
    text-align: center;
    margin: auto;
  }
}

/* span.required::after {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
} */
</style>

<style>
.el-form-item__error {
  z-index: 999 !important;
}
</style>
